<template>
<div id="Shenghuohui">
  <div id="shenghuohuiIndex">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/recruit' }">公开招聘</el-breadcrumb-item>
      <el-breadcrumb-item>{{ typename }}</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxs">
      <el-select v-model="theYear" @change="getProjectList">
        <el-option :value="null" label="全部" />
        <el-option v-for="(item,index) in yearList" :key="'year'+index" :value="item" :label="item" />
      </el-select>
      <el-button v-show="editBtnsVisible" type="success" @click="handleAdd()" icon="el-icon-plus" style="margin:10px">新增</el-button>
      <el-button v-show="editBtnsVisible" type="warning" @click="handleAuth" icon="el-icon-user" style="margin:10px;color:#fff !important;float:right">授权</el-button>
      <el-button v-show="editBtnsVisible" type="primary" @click="handlePerson" icon="el-icon-user-solid" style="margin:10px;color:#fff !important;float:right">综合统计</el-button>
      <!-- <el-button v-show="editBtnsVisible" type="success" @click="handleUnitView" icon="el-icon-s-goods" style="margin:10px;color:#fff !important;float:right">单位视图</el-button> -->
    </section>
    <section class="wboxd" style="margin-top:10px">
      <el-table :data="projectlist" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight" border>
        <el-table-column type="index" label="序号" width="70" align="center">
        </el-table-column>
        <el-table-column prop="theYear" label="年度" width="120" align="center">
        </el-table-column>
        <el-table-column prop="batch" width="120" label="批次" align="center">
          <template slot-scope="scope">第{{scope.row.batch}}批</template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <template v-if="inRoles('ROLE_recruit') || inRoles('ROLE_admin')">
              <el-tag style="margin:10px 0" v-if="scope.row.state===0">未初始化</el-tag>
              <el-tag style="cursor:pointer;margin:10px 0" v-else-if="scope.row.state===1" type="success" effect="dark" title="点击关闭该项目" @click="setState(scope.row.id,2)">已启动</el-tag>
              <el-tag style="cursor:pointer;margin:10px 0" v-else-if="scope.row.state===2" type="info" effect="dark" title="点击开启该项目" @click="setState(scope.row.id,1)">已关闭</el-tag>
            </template>
            <template v-else>
              <el-tag style="margin:10px 0" v-if="scope.row.state===0">未初始化</el-tag>
              <el-tag style="margin:10px 0" v-else-if="scope.row.state===1" type="success" effect="dark">已启动</el-tag>
              <el-tag style="cursor:pointer;margin:10px 0" v-else-if="scope.row.state===2" type="info" effect="dark">已关闭</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="500">
          <template slot-scope="scope">
            <template>
              <el-button size="small" style="margin:10px 10px 10px 0" v-if="scope.row.state!==0" @click="projectshow(scope.row.id)">进入</el-button>
              <span v-show="editBtnsVisible" ref="EditBtns" style="margin:10px 10px 10px 0" v-if="inRoles('ROLE_recruit') || inRoles('ROLE_admin')">
                <el-button size="small" v-if="scope.row.state===0" @click="handleStart(scope.row.id)" type="success" :loading="btnLoading">初始化并开启</el-button>
                <el-button size="small" v-if="scope.row.state===0" @click="handleAdd(scope.row)" type="primary" :loading="btnLoading">修改</el-button>
                <el-button type="danger" v-if="scope.row.state===0" size="small" @click="handleDel(scope.row.id)" :loading="btnLoading">删除</el-button>
              </span>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination style="float:right" :total="totalnum" :page-size="pageSize" @current-change="handleCurrentChange" :current-page="pageNum" @size-change="handleSizeChange" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
      <!--新增界面-->
      <el-dialog :title="formTitle" :visible.sync="addFormVisible">
        <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
          <el-form-item label="标题" prop="title">
            <el-input v-model="addForm.title" auto-complete="off" style="width:300px;"></el-input>
          </el-form-item>
          <el-form-item label="年度" prop="theYear">
            <el-select v-model="addForm.theYear" placeholder="请选择" style="width:100px;">
              <el-option v-for="index of 5" :label="nowYear+1-index" :key="'year'+(nowYear+1-index)" :value="nowYear+1-index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="批次" prop="batch">
            <el-select v-model="addForm.batch" placeholder="请选择" style="width:100px;">
              <el-option v-for="index of 10" :label="'第'+index+'批'" :key="'batch'+index" :value="index"></el-option>
            </el-select>
            <!-- <el-date-picker v-model="addForm.TheYear" type="year" placeholder="选择年度" format="yyyy" value-format="yyyy"></el-date-picker> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addFormSubmit" :loading="addLoading">提交</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      formTitle: '新增',
      theYear: null,
      nowYear: null,
      type: 1,
      typename: '应届毕业生招聘',
      pageNum: 1,
      pageSize: 20,
      yearList: [],
      btnLoading: false,
      tableHeight: 100,
      maxId: 0,
      isAdmin: true, // 临时调整为true
      isChuzhang: false,
      editVisible: false,
      editBtnsVisible: true,
      projectlist: [],
      listLoading: false,
      totalnum: 0,
      addFormVisible: false, // 新增界面是否显示
      addLoading: false,
      // 新增界面数据
      addForm: {
        id: null,
        title: '',
        theYear: null,
        batch: null
      },
      addFormRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        theYear: [
          { required: true, message: '请选择年度', trigger: 'blur' }
        ],
        batch: [
          { required: true, message: '请选择批次', trigger: 'blur' }
        ]
      },
      editFormRules: {
        Name: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        TheYear: [
          { required: true, message: '请选择年度', trigger: 'blur' }
        ]
      },
      editFormVisible: false, // 编辑界面是否显示
      editLoading: false,
      // 编辑界面数据
      editForm: {
        Name: '',
        TheYear: '',
        Id: 0
      }
    }
  },
  methods: {
    ftypename (type) {
      switch (type) {
        case 1:
          return '应届毕业生招聘'
        case 2:
          return '在职人员招聘'
        case 3:
          return '其他招聘'
      }
    },
    handleSizeChange (val) {
      this.changeSizeFlag = true
      this.pageNum = 1
      this.pageSize = val
      this.getProjectList()
    },
    handleCurrentChange (val) {
      if (this.changeSizeFlag === false) {
        this.pageNum = val
        this.getProjectList()
      }
    },
    handleStart (id) {
      this.$confirm('确定要初始化并开启该项目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.btnLoading = true
        this.$http.get(this.$http.defaults.recruitAPI + 'api/recruitBusBatch/startBatch?id=' + id).then(response => {
          console.log(response.data.success)
          if (response.data.success === true) {
            this.$message({
              message: '初始化成功',
              type: 'success'
            })
            this.btnLoading = false
            this.getProjectList()
          } else {
            this.$message({
              message: '初始化失败:' + response.data.message,
              type: 'error'
            })
            this.btnLoading = false
          }
        }).catch(error => {
          this.btnLoading = true
          console.log(error)
          this.$message({
            message: '初始化失败:' + error,
            type: 'error'
          })
          this.btnLoading = false
        })
      })
    },
    setState (id, state) {
      const stateText = state === 1 ? ' 开启 ' : ' 关闭 '
      this.$confirm('确定要' + stateText + ' 该项目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http
          .post(this.$http.defaults.recruitAPI + 'api/recruitBusBatch/save', {id: id, state: state})
          .then(response => {
            if (response.data.success === true) {
              this.$message({
                message: stateText + '成功',
                type: 'success'
              })
              this.getProjectList()
            } else {
              console.log(stateText + '失败:' + response.data.message)
              this.$message({
                message: stateText + '失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      })
    },
    inRoles (str) {
      let arr = JSON.parse(localStorage.getItem('Roles'))
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    handleAuth () {
      this.$router.push({name: `recruitAuth`})
    },
    handlePerson () {
      this.$router.push({name: `recruitPerson`})
    },
    handleUnitView () {
      this.$router.push({name: `recruitUnitView`})
    },
    projectshow (id) {
      this.$router.push({name: `recruitMain`, query: {id: id}})
    },
    getProjectList () {
      let para = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        theYear: this.theYear,
        batchType: this.type
      }
      this.listLoading = true
      this.$http
        .post(this.$http.defaults.recruitAPI + `api/recruitBusBatch/queryByPage`, para)
        .then(response => {
          if (response.data.success) {
            this.listLoading = false
            this.projectlist = response.data.result.records
            this.totalnum = response.data.result.total
            this.changeSizeFlag = false
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getYearList () {
      this.$http
        .get(this.$http.defaults.recruitAPI + `api/recruitBusBatch/getAllYearList`)
        .then(response => {
          if (response.data.success) {
            this.yearList = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    handleAdd: function (obj) {
      this.addFormVisible = true
      let nowdate = new Date()
      this.nowYear = nowdate.getFullYear()
      console.log('显示新增界面:' + this.addFormVisible)
      if (obj) {
        this.formTitle = '新增'
        this.addForm = Object.assign({}, obj)
      } else {
        this.formTitle = '修改'
        this.addForm = {
          id: null,
          batch: null,
          theYear: null,
          title: ''
        }
      }
    },
    // 新增
    addFormSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addLoading = true
          let para = {
            id: this.addForm.id,
            title: this.addForm.title,
            theYear: this.addForm.theYear,
            batch: this.addForm.batch,
            batchType: this.type
          }
          this.$http.post(this.$http.defaults.recruitAPI + `api/recruitBusBatch/save`, para).then(response => {
            console.log(response.data.success)
            if (response.data.success === true) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
              this.addLoading = false
              this.getProjectList()
            } else {
              console.log('提交失败:' + response.data.Msg)
              this.$message({
                message: '提交失败:' + response.data.Msg,
                type: 'error'
              })
              this.addLoading = false
            }
          }).catch(function (error) {
            console.log(error)
            this.$message({
              message: '提交失败:' + error,
              type: 'error'
            })
            this.addLoading = false
          })
        }
      })
    },
    // 删除
    handleDel: function (id) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        let para = {ids: [id]}
        this.$http.post(this.$http.defaults.recruitAPI + `api/recruitBusBatch/remove`, para).then(response => {
          if (response.data.success === true) {
            this.addLoading = false
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            console.log('删除失败:' + response.data.message)
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
          this.getProjectList()
        })
      })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 272
      })
    }
  },
  mounted () {
    this.type = parseInt(this.$route.query.type)
    this.typename = this.ftypename(this.type)
    this.getProjectList()
    this.tableresize(this)
    this.getYearList()
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .wboxd .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #testlist .wboxs{
    height:45px;
    padding-top:10px;
  }
  .el-table--border th, .el-table--border td {
    border-right: 1px solid #95B8E7;
  }
  .el-table th.is-leaf, .el-table td {
    border-bottom: 1px solid #95B8E7;
  }
  #Shenghuohui .el-table td{
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }

</style>
<style scoped>
  #shenghuohuiIndex h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  #shenghuohuiIndex .el-pagination{
    float: left;
    padding:7px 10px;
  }
  #shenghuohuiIndex .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  #shenghuohuiIndex .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
